<template>
  <div class="home">
    <!-- 头部 -->
    <div class="top-menu">
      <div class="menu-1" @click="toSort">
        <i class="iconfont icon-danlieliebiao"></i>
      </div>
      <div class="menu-2">
        <van-icon name="search" color="#D7D7D7" /><span style="font-size: 15px"
          >|</span
        ><span>点击此处进行搜索</span>
      </div>
      <div class="menu-3" @click="toLogin"><button>登录</button></div>
    </div>
    <!-- 头部 -->
    <!-- 轮播图 -->
    <van-swipe :autoplay="3000" class="my-swipe">
      <van-swipe-item v-for="(image, index) in images" :key="index">
        <img v-lazy="image" />
      </van-swipe-item>
    </van-swipe>
    <!-- 轮播图 -->
    <!-- 热门推荐 -->
    <div class="hot-recommend">
      <div class="hot-1"><span>热门推荐</span></div>
      <div class="hot-2">
        <div class="hot-2-1">
          <img :src="image" alt="" />
          <span>文字描述dasdasdadadad</span>
          <div>
            <span>￥2999</span>
            <span>300+评论</span>
          </div>
        </div>
        <div class="hot-2-1">
          <img :src="image" alt="" />
          <span>文字描述dasdadadaddadadasddadasdasdadasadsadas</span>
          <div>
            <span>￥2999</span>
            <span>300+评论</span>
          </div>
        </div>
        <div class="hot-2-1">
          <img :src="image" alt="" />
          <span>文字描述</span>
          <div>
            <span>￥2999</span>
            <span>300+评论</span>
          </div>
        </div>
        <div class="hot-2-1">
          <img :src="image" alt="" />
          <span>文字描述</span>
          <div>
            <span>￥2999</span>
            <span>300+评论</span>
          </div>
        </div>
        <div class="hot-2-1">
          <img :src="image" alt="" />
          <span>文字描述</span>
          <div>
            <span>￥2999</span>
            <span>300+评论</span>
          </div>
        </div>
        <div class="hot-2-1">
          <img :src="image" alt="" />
          <span>文字描述</span>
          <div>
            <span>￥2999</span>
            <span>300+评论</span>
          </div>
        </div>
      </div>
    </div>
    <!-- 热门推荐 -->
  </div>
</template>

<script>
export default {
  name: "home",
  data() {
    return {
      status: false,
      image: require("@/assets/img/shop/logo.png"),
      images: [
        "https://img01.yzcdn.cn/vant/apple-1.jpg",
        "https://img01.yzcdn.cn/vant/apple-2.jpg",
      ],
    };
  },
  methods: {
    toSort() {
      this.$router.push("/shop/sort");
    },
    toLogin() {
      if (this.status == false) {
        this.$router.push("/login");
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.top-menu {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: red;
  height: 60px;

  .menu-1 {
    margin: 0 10px;
    i {
      color: #fff;
      font-size: 30px;
    }
  }
  .menu-2 {
    height: 40px;
    width: 30vh;
    background-color: #fff;
    border-radius: 20px;
    display: flex;
    align-items: center;
    padding-left: 10px;

    span {
      margin-left: 5px;
      color: #d7d7d7;
      font-size: 15px;
    }
  }
  .menu-3 {
    margin: 0 10px;
    button {
      color: #fff;
      border: none;
      background: none;
      font-size: 20px;
    }
  }
}
.my-swipe,
.van-swipe-item {
  height: 200px;
  width: auto;
  img {
    height: 200px;
    width: auto;
  }
}
.hot-recommend {
  background-color: #F6F6F6;
  margin: 50px 10px;
  div {
    display: flex;
  }
  .hot-1 {
    justify-content: center;
    span {
      // color: #555555;
      font-weight: 600;
      font-size: 40px;
    }
  }
  .hot-2 {
    flex-wrap: wrap;
    justify-content: flex-start;
    .hot-2-1 {
      background: #fff;
      align-items: center;
      margin: 10px;
      padding-bottom: 10px;
      flex-direction: column;
      width: 44%;
      border-radius: 10px;
    }
    span {
      word-break: break-all;
    }
    img {
      width: 6rem;
      height: auto;
    }
  }
}
</style>
